<template>
	<div>
		<p>
			<input v-model="input" type="text" />
			{{ input }}
			<span v-once>{{ input }}</span>
		</p>
		<p v-text="str"></p>
		<div v-html="dom"></div>
		<div v-show="isow">我出来了</div>
		<button @click="isow = !isow">切换显示</button>
		<div v-if="init">如果频繁切换的话，优先使用v-show、</div>
		<button @click="init = !init">加载与销毁</button>
		<p v-for="(value, key, index) in obj" :key="key">
			{{ index + 1 }} {{ key }}: {{ value }}
		</p>
	</div>
</template>
<script>
export default {
	data() {
		return {
			obj: {
				name: '跋扈',
				age: 280,
				job: '装系统',
			},
			init: true,
			isow: true,
			dom: `<h2>斗破苍穹</h2>`,
			str: '我是一句内容',
			input: '我只会显示第一次的内容',
		}
	},
	// 创建
	beforeCreate() {},
	created() {},
	// 挂载
	beforeMount() {},
	mounted() {
		// 页面打开后发起自动请求
	},
	// 更新会多次触发：data和props更新的时候
	beforeUpdate() {
		// 可以对data数据进行二次修改
	},
	updated() {
		// 这里仅仅是查看最新的data或props
	},
	// 销毁
	beforeDestroy() {
		// 清除定时器或常驻内容内存的
	},
	destroyed() {},
}
</script>